<template>
  <div>

    <!-- 顶部数据 -->
    <div class="dashboard-container">
      <el-card class="box-card flex-item ">
        <div slot="header" class="clearfix ">
          <span>机构概述</span>
        </div>
        <div class="flex-container">
          <div id="Sortingcenter" class="text item flex-item ">
            <span>{{ organ.organName }}</span>
            <p>
              {{ organ.organAddress }}
            </p>
            <p>{{ organ.principal }} {{ organ.phone }}</p>
            <el-row>
              <el-button type="success" plain @click="open">查看营业部分布</el-button>
            </el-row>
          </div>
          <div id="dataDetails" class="text item flex-item ">

            <div class="youbian">
              <p>分拣中心（个）</p>
              <h3>{{ organ.sortingCenterNumber }}</h3>
              <p>司机人数（个）</p>
              <h3>{{ organ.driverNumber }}</h3>
            </div>

            <div class="zuobian">
              <p>营业部（个）</p>
              <h3>{{ organ.agencyNumber }}</h3>
              <p>快递员人数（个）</p>
              <h3>{{ organ.courierNumber }}</h3>
            </div>

          </div>
        </div>
      </el-card>

      <el-card class="box-card flex-item ">
        <div slot="header" class="clearfix ">
          <span>今日数据</span>
          <div class="time">⚪ <span>{{ time }}</span></div>
        </div>
        <div class="flex-data">
          <div class="data-zuobian">
            <p>订单金额（元）</p>
            <h3>{{ today.orderAmount }}</h3>
            <span>较昨日 +{{ today.orderAmountChanges }} ↑</span>
          </div>
          <div class="data-zuobian">
            <p>订单数量（笔）</p>
            <h3>{{ today.orderNumber }}</h3>
            <span>较昨日 +{{ today.orderNumberChanges }} ↑</span>
          </div>
          <div class="data-zuobian">
            <p>运输任务（次）</p>
            <h3>{{ today.transportTaskNumber }}</h3>
            <span>较昨日 +{{ today.transportTaskNumberChanges }} ↑</span>
          </div>
        </div>
      </el-card>
    </div>
    <!--代办任务 -->
    <div class="dashboard-container">

      <el-card class="box-card flex-item ">
        <div slot="header" class="clearfix ">
          <span>代办任务
            <el-popover
              placement="top-start"

              width="400"
              trigger="hover"
              :content="titop"
            >
              <i slot="reference" class="el-icon-edit" />
            </el-popover>

          </span>
          <div class="time">⚪ <span>{{ time }}</span></div>
        </div>
        <div class="flex-data">

          <div class="pic-zuobian">
            <drop-data :pickup="'Pickup'" :data="backlog" />
            <span>代取件 <i>{{ backlog.waitingPickupNumber }}</i></span>
          </div>

          <div class="pic-zuobian">
            <drop-data :data="backlog" :pickup="'Delivery'" />
            <span>代派件 <i>{{ backlog.waitingDispatchNumber }}</i></span>
          </div>

          <div class="pic-zuobian">
            <drop-data :data="backlog" :pickup="'Unassigned'" />
            <span>未分配运输 {{ backlog.unassignedTransportTaskNumber }}</span>
          </div>

          <div class="pic-zuobian">
            <drop-data :data="backlog" :pickup="'Timeout'" />
            <span>超时运输 {{ backlog.timeoutTransportTaskNumber }}</span>
          </div>
        </div>
      </el-card>

      <div class="pic-youbian">
        <el-card class="box-card flex-item ">
          <div slot="header" class="clearfix ">
            <span>执行中的任务
              <el-popover
                placement="top-start"
                width="400"
                trigger="hover"
                :content="titop"
              >
                <i slot="reference" class="el-icon-edit" />
              </el-popover>

            </span>
            <div class="time">⚪ <span>{{ time }}</span></div>
          </div>
          <div class="flex-data">

            <div class="pic-zuobian zuobian">
              <drop-data :data="backlog" :pickup="'inTransit'" />
              <span>运输中 53</span>
            </div>

            <div class="pic-zuobian">
              <drop-data :data="backlog" :pickup="'inDispatch'" />
              <span>派件中 34</span>
            </div>

          </div>
        </el-card>
      </div>

    </div>
    <!-- 功能列表 -->
    <div class="dashboard-container">
      <el-card class="box-card flex-item ">
        <div slot="header" class="clearfix ">
          <span>常用功能</span>
        </div>

        <div class="flex-data">

          <div class="data-zuobian">
            <router-link to="/">
              <img src="@/images/工作台/kuaidi.png" alt="">
              <h4>快递作业</h4>
            </router-link>
          </div>

          <div class="data-zuobian">
            <router-link to="/attendance/transport">
              <img src="@/images/工作台/yunshu.png" alt="">
              <h4>运输任务</h4>
            </router-link>
          </div>

          <div class="data-zuobian">
            <router-link to="/attendance/line">
              <img src="@/images/工作台/xianlu.png" alt="">
              <h4>线路管理</h4>
            </router-link>
          </div>

          <div class="data-zuobian">
            <router-link to="/role/vehicleList">
              <img src="@/images/工作台/cheliang.png" alt="">
              <h4>车辆管理</h4>
            </router-link>
          </div>

          <div class="data-zuobian">
            <router-link to="/permission/driver">
              <img src="@/images/工作台/siji.png" alt="">
              <h4>司机管理</h4>
            </router-link>
          </div>

          <div class="data-zuobian">
            <router-link to="/workbench/freight">
              <img src="@/images/工作台/yunfei.png" alt="">
              <h4>运费查询</h4>
            </router-link>
          </div>

        </div>
      </el-card>
    </div>

    <!-- 地图板块 -->
    <div class="dashboard-container">
      <el-card class="box-card flex-item ">
        <div slot="header" class="clearfix ">
          <span>线路管理</span>
        </div>

        <div class="flex-data">
          <!-- 地图 -->

          <china-cap />

        </div>
      </el-card>

      <el-card class="box-card flex-item ">
        <div slot="header" class="clearfix ">
          <span>运输任务</span>
          <a class="time">查看更多</a>
        </div>

        <div class="flex-data">
          <div class="map-zuobian">
            <el-table :data="datas">
              <!-- 放置列 -->
              <el-table-column prop="b" align="center" width="100" label="任务编号">
                <template slot-scope="{ row }">
                  {{ row.id }}
                </template>
              </el-table-column>
              <el-table-column align="center" width="120" label="起始地">
                <template slot-scope="{ row }">

                  {{ row.startAgency }}

                </template>
              </el-table-column>
              <el-table-column align="center" width="120" label="目的地">
                <template slot-scope="{ row }">

                  {{ row.endAgency }}

                </template>
              </el-table-column>
              <el-table-column align="center" width="100" label="车辆">
                <template slot-scope="{ row }">

                  {{ row.licensePlate }}

                </template>
              </el-table-column>
              <el-table-column align="center" width="100" label="任务状态">
                <template slot-scope="{ row }">

                  {{ row.status === 2 ? "进行中" : "未进行" }}

                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 订单板块 -->
    <div class="dashboard-container">

      <el-card class="box-card flex-item ">
        <div slot="header" class="clearfix ">
          <span>订单总量</span>
          <div class="time"><span>{{ time }}</span></div>
        </div>
        <div class="map-data">
          <div class="map-zuobian">
            <span>单位：笔</span>
            <div class="map-data">
              <div class="data-zuobian">
                <h3> {{ listChart.orderMaxNumber }}</h3>
                <span>订单最高值</span>
              </div>
              <div class="data-zuobian">
                <h3>{{ listChart.orderAverageNumber }}</h3>
                <span>订单平均值</span>
              </div>
              <div class="data-zuobian">
                <h3>{{ listChart.orderMinNumber }}</h3>
                <span>订单最低值</span>
              </div>
            </div>
            <lineChart :list-chart="listChart" />
          </div>
        </div>
      </el-card>

      <el-card class="box-card flex-item ">
        <div slot="header" class="clearfix ">
          <span>订单分布</span>
          <div class="time"><span>{{ time }}</span></div>
        </div>
        <div class="map-data">
          <div class="map-zuobian">

            <distribution />
          </div>
        </div>
      </el-card>

    </div>

  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { mapGetters, mapState } from 'vuex'
import { getOneData } from '@/api/workspace'
import distribution from './components/distribution.vue'
import lineChart from './components/lineChart.vue'
import dropData from './components/dropData.vue'
import chinaCap from './components/china-cap.vue'

export default {
  name: 'Dashboard',
  components: {
    chinaCap, // 地图
    lineChart, // 折线图
    distribution, // 订单分布
    dropData// 水滴图
  },
  data() {
    return {
      titop: '待取件率=待取件/(下单数量-取消数量)，且取件类型=上门取件待派送率=待派送/(待派送+派送中+已签收+拒收)未分配率=未分配/全部数据超时率=超时任务/(已完成+进行中+已取消）',
      time: parseTime(Date()),
      listChart: {}, // 订单总量
      datas: [], // 运输任务
      organ: [], // 机构概述
      today: [],
      backlog: {
        timeoutTransportTaskNumber: 0, // 超时运输任务数量
        timeoutTransportTaskRate: 0, // 超时运输任务比率
        unassignedTransportTaskNumber: 0, // 未分配运输任务数量
        unassignedTransportTaskRate: 0, // 未分配运输任务比率
        waitingDispatchNumber: 0, // 待派送数量
        waitingDispatchRate: 0, // 待派送任务比率
        waitingPickupNumber: 0, // 待取件数量
        waitingPickupRate: 0// 待取件任务比率
      }// 待办事项
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ]),
    ...mapState('user', [name])
  },

  created() {
    this.oneData()
  },
  methods: {
    open() {
      this.$alert('这是一段内容', '标题名称', {
        confirmButtonText: '确定'
      })
    },
    async oneData() {
      const res = await getOneData()
      // console.log(res)
      this.listChart = res.data.orderLineChart
      // console.log(res.data.orderLineChart)
      this.datas = res.data.transportTaskList
      this.organ = res.data.organOverview
      this.today = res.data.todayData
      this.backlog = res.data.backlog
    }

  }
}
</script>

<style lang="scss" scoped>

.dashboard {

  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.flex-container,
.dashboard-container {
  display: flex;
  justify-content: space-between;
}
.flex-item {
  background-color: #ffffff;
  // padding: 20px;
  flex: 1;
  margin-right: 20px;
  border-right-style: solid;
  border-color: #ebeef5;
}
.flex-data{
  display: flex;

  justify-content: space-between;
  align-content: center;
  .data-zuobian{
    display: flex;
    flex-direction:column;
    text-align: center;
    margin: 5px 27px;
    p{
    font-size: 14px;
    color: #20232a;
    margin-bottom: 21px;
    }
    span{
    font-size: 14px;
    color: #b695a1;
    margin-bottom: 21px;
    }
    h3{
    font-size: 36px;
    color: #20232a;
    font-weight: 700;
    margin-bottom: 25px;
    margin-top: 14px;
    }
  }
}
.flex-text{
  flex: 1;
}
/* 最后一列不需要右边距 */
.flex-item:last-child {
  margin-right: 0;
  border-right-style: none;
}
 .box-card .clearfix span{
  font-size: 20px !important;
  font-weight: bold;

}
.clearfix {
  display: flex;
  position: relative;
  .time{
     position: absolute;
     right: 0;
     font-size: 15px ;
     color: #a286a1;

     span{
      font-size: 15px !important;
     }
     h3{
      margin: 40px 0;
     }
    }
}
#Sortingcenter {
   padding-top: 20px;
  p{
  color: #818693;
  font-size: 14px;
  margin: 20px 0;
  }
}
#dataDetails{
  display: flex;
  justify-content: space-between;
  align-content: center;
  .youbian{
    flex: 1;
    margin-right: 20px !important;
  }
  .zuobian{
    flex: 1;
     margin-right: -30px !important;
  }
  h3{
    color: red;
    font-size: 26px;
  }
  p{
    margin: -2px;
  }
}
//中间
.pic-zuobian{
   display: flex;
    flex-direction:column;
    text-align: center;
    margin: 5px 27px;
    padding: 0px;
    margin: 0px;
    border-width: 0px;

    img{
      width: 150px;
      height: 150px;
      margin-bottom: 20px;
    }
    span{
      color: #20232a;
      font-weight: bold;
    }
    i {
         font-style: normal;
      }
}
.zuobian{
  margin-right: 90px
}

.map-zuobian{
  flex: 1;
  width: 100%;
  height: 400px;
  img{
    width: 100%;
  }
  span{
     font-size: 15px;
     color: #1b1a1a;
  }
  h3{
    margin-bottom: 10px;
  }
  .map-data{

  display: flex;

  justify-content: space-between;
  align-content: center;
  .data-zuobian{
    display: flex;
    flex-direction:column;
    text-align: center;
    margin: 5px 27px;
    p{
    font-size: 14px;
    color: #20232a;
    margin-bottom: 21px;
    }
    span{
    font-size: 14px;
    color: #b695a1;
    margin-bottom: 21px;
    }
    h3{
    font-size: 36px;
    color: #d65928;
    font-weight: 700;
    margin-bottom: 25px;
    margin-top: 14px;
    }
  }

  }
}
</style>
